<template>
  <div class="global-container">
    <div class="global-header">
      <img
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/current.png')"
      />
      <div class="title">
        个人信息
        <div class="title-content">
          提供个人信息管理能力，支持个人信息查看、租户信息查看等功能。
        </div>
      </div>
    </div>

    <div class="servicePackageList11" style="margin-top: 10px">
      <div style="margin-left: 30px; margin-top: 10px">
        <span style="font-weight: 700; font-size: 20px"> 用户信息 </span>
      </div>
      <el-row :gutter="20" style="margin-left: 30px;">
        <el-col :span="6">
          <span>用户名称：</span>
          <el-input
            v-model="userInfo.name"
            disabled
            style="width: 70%"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <span>用户描述：</span>
          <el-tooltip
            effect="dark"
            :content="userInfo.introduction"
            placement="bottom"
            popper-class="tooltipClass"
            :disabled="isShowTooltip"
          >
            <el-input
              v-model="userInfo.introduction"
              disabled
              style="width: 70%"
              ref="inputRef"
              @mouseover="onMouseOver($event)"
            ></el-input>
          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <span>用户角色：</span>
          <el-tag
            :key="tag"
            v-for="tag in userInfo.roles"
            :disable-transitions="false"
          >
            {{ tag }}
          </el-tag>
        </el-col>
        <el-col :span="4">
          <!-- <span style="padding-top: 10px; margin-right: 10px">修改密码</span> -->
          <el-button
            type="text"
            @click="openEditPasswordDialog()"
            style="padding-top: 10px; margin-right: 10px"
          >
            修改密码
          </el-button>
        </el-col>
      </el-row>
      <div>
        <span style="margin-left: 30px; font-weight: 700; font-size: 20px">
          租户列表
        </span>
        <el-table
          tooltip-effect="dark"
          align="center"
          style="width: 100%"
          :data="tenantList"
          :cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
          :header-cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
          height="56vh"
        >
          <el-table-column
            prop="tenantName"
            label="租户名"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="clusterZhname"
            label="集群"
            width="180"
          ></el-table-column>
          <el-table-column prop="tenantName" label="命名空间" width="190">
          </el-table-column>
          <el-table-column
            prop="tenantCpu"
            label="CPU(核)"
            width="120"
          ></el-table-column>
          <el-table-column prop="tenantMem" label="内存(GB)" width="120">
            <template slot-scope="scope">
              {{ scope.row.tenantMem / 1024 }}
            </template>
          </el-table-column>
          <el-table-column label="描述">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.tenantDescription"
                placement="bottom"
                popper-class="tooltipClass"
                :disabled="isShowTooltip"
              >
                <div class="descSpan" @mouseover="onMouseOver($event)">
                  {{ scope.row.tenantDescription }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间" width="200">
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px; float: right">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="page.total"
            :page-size="page.pageSize"
            :page.sync="page"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
    <!--修改密码-->
    <el-dialog
      title="修改用户密码"
      width="480px"
      :visible.sync="editPasswordDialogVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="handleCloseDialog"
      :close-on-press-escape="false"
    >
      <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        label-position="right"
      >
        <el-form-item label="旧密码:" prop="oldpassword">
          <el-input
            class="demo-input-suffix"
            v-model="dataForm.oldpassword"
            type="password"
            auto-complete="off"
            show-password
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newpassword" label-width="100px">
          <el-input
            class="demo-input-suffix"
            v-model="dataForm.newpassword"
            type="password"
            auto-complete="off"
            show-password
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码:"
          prop="checkpassword"
          label-width="100px"
        >
          <el-input
            class="demo-input-suffix"
            v-model="dataForm.checkpassword"
            type="password"
            auto-complete="off"
            show-password
            style="width: 300px"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <div style="margin-left: 180px;">
            <el-button
              type="primary"
              size="small"
              @click="confirmEditUserPassword"
              class="el-button-primary-style"
            >确定
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="editPasswordDialogVisible = false"
              class="el-button-primary-style"
            >取消
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <!--      <div slot="footer" class="dialog-footer" style="margin-top: 5px">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          @click.native="confirmEditUserPassword"-->
      <!--          class="el-button-primary-style"-->
      <!--        >确定-->
      <!--        </el-button>-->
      <!--        <el-button-->
      <!--          @click.native="editPasswordDialogVisible = false"-->
      <!--          type="primary"-->
      <!--          class="el-button-primary-style"-->
      <!--        >取消-->
      <!--        </el-button>-->
      <!--      </div>-->
    </el-dialog>
  </div>
</template>

<script>
  import {getUserRole} from "@/api/user";

  export default {
    name: "PersonalInformation",
    data() {
      return {
        userInfo: {
          introduction: "",
          name: "",
          roles: [],
        },
        tenantList: [],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        tmpPage: {
          pageSize: 10,
          pageNum: 1,
          filterKey: "",
        },
        editPasswordDialogVisible: false,
        tmpUserInfo: {},
        dataForm: {
          oldpassword: "",
          newpassword: "",
          checkpassword: "",
        },
        dataFormRules: {
          oldpassword: [
            {
              required: true,
              message: "请输入旧密码",
              //validator: checkOldPw,
              trigger: "blur",
            },
          ],
          newpassword: [
            {
              required: true,
              message: "请输入新密码",
              trigger: "blur",
            },
          ],
          checkpassword: [
            {
              required: true,
              message: "请再次输入新密码",
              //validator: checkNewPw,
              trigger: "blur",
            },
          ],
        },
        isShowTooltip: false,
      };
    },
    methods: {
      openEditPasswordDialog() {
        this.editPasswordDialogVisible = true;
        // this.tmpUserInfo = {...row};
      },
      //关闭时候清空表单
      handleCloseDialog() {
        this.$refs.dataForm.resetFields();
      },
      confirmEditUserPassword() {
        let params = {
          username: this.userInfo.name,
          originalPassword: this.dataForm.oldpassword,
          newPassword: this.dataForm.newpassword,
        };
        this.$appManageApi
          .updatePasswordByName(params)
          .then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.data);
              this.editPasswordDialogVisible = false;
              this.$refs.dataForm.resetFields();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      getUserInfo() {
        getUserRole().then((res) => {
          this.userInfo = res.data;
        });
      },
      getUserTenantByUserId() {
        this.$appManageApi.getRelTenantByUserId(this.tmpPage).then((res) => {
          if (res && res.code === 200) {
            this.tenantList = res.data.records;
            this.page.total = res.data.total;
          }
        });
      },
      changePage(currentPage) {
        this.page.currentPage = currentPage;
        this.tmpPage.pageNum = currentPage;
        this.getUserTenantByUserId();
      },
    },
    mounted() {
      this.getUserInfo();
      this.getUserTenantByUserId();
    },
  };
</script>

<style scoped>
  .servicePackageList11 {
    border: 1px solid #fff;
    /*height: 75vh;*/
    background-color: white;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #304156;
  }
</style>

<style>
  .tooltipClass {
    max-width: 300px;
  }
</style>
